<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>0000_画圆</title>
</head>
<body>
  <canvas id="canvas" width="600" height="600"></canvas>
</body>
<script>
  const color =  [{ // 指定渐变色
        step: '0',
        color: '#43e8ff'
      }, {
              step: '0.4',
              color: '#8024db'
      }, {
              step: '0.6',
              color: '#a044ff'
      }, {
              step: '0.9',
              color: '#5205ce'
      }, {
              step: '1',
              color: '#25c1fb'
      }];
  const canvas = document.getElementById('canvas');
  const ctx = canvas.getContext('2d');
  const gradient = ctx.createLinearGradient(300, 600, 300, 0); // 创建一个沿参数坐标指定的指向渐变
  color.forEach(element => {
    gradient.addColorStop(element.step, element.color);
  })

  const R = 300 // 外圆半径
  const interCenter = { x:300, y: 300} // 外圆圆心
  const interColor = gradient

  const r = 200 // 內圆半径
  const innerCenter = { x:300, y: 300} // 內圆圆心
  const innerColor = 'white'

  const btnR =(R - r) / 2 // 按钮半径

  const N = 3 // 按钮个数

  drawCircle(interCenter.x, interCenter.y, R, interColor)
  drawCircle(innerCenter.x, innerCenter.y, r, innerColor)

  var btnCenters = computeBtnCenters(N, interCenter, R - btnR)
  for (var index = 0; index < btnCenters.length; index ++) {
    var center = btnCenters[index]
    drawBtn(center.x, center.y, btnR)
  }

/**
 * 画圆
 * x,y 圆心坐标
 * r 按钮半径
*/
  function drawCircle (x, y, r, color) {
    ctx.beginPath()
    ctx.fillStyle = color
    ctx.arc(x, y, r, 0, (Math.PI / 180) * 360, false)
    ctx.fill()
    ctx.closePath()
  }

  /**
   * 绘制期数
  */
  function drawText (x, y, r) {
    ctx.textAlign = 'center'  // 
    ctx.textBaseline = 'middle'
    ctx.fillStyle = 'white'
    ctx.font = 'bold 15px 微软雅黑'
    ctx.fillText('24期', x, y)// 绘制期数
  }
/**
 * x,y 圆心坐标
 * r 按钮半径
*/
function drawBtn (x, y, r) {
  drawCircle(x, y, r, 'red') // 绘制按钮
  drawText(x, y, r) // 绘制期数
}
/**
 * num 按钮个数
 * center  大圆圆心
 * radius 半径
 * @return 所有按钮的圆心位置
*/
function computeBtnCenters(num, center, radius) {
	var i, centers = [];
	for(i = 0; i < num; i++) {
		var x = center.x + radius * Math.sin(2 * Math.PI * i / num);
		var y = center.y - radius * Math.cos(2 * Math.PI * i / num);
    centers.push({'x': x, 'y': y});
	}
  return centers;
}
</script>
</html>